<template>
  <div class="login-page">
    <div class="login-bg" :style="`background-image: url(${rootUrl}img/login/login_bg.webp);`">
    </div>
    <div class="website-header">

      <div class="website-inline">
        <img class="logo" :src="`${rootUrl}img/admin/logo_white.png`" />
        <div class="title">
          <div class="name">太仓高新区{{appConfig.title}}</div>
        </div>
      </div>
    </div>
    <div class="login-body">
      <div class="login-logo">
        <span class="login-title">欢迎登录</span>
      </div>
      <div class="login-form">
        <userLogin></userLogin>
      </div>
    </div>
    <div class="login-footer">
      <span style="margin-bottom: 10px;"> 权属单位：太仓高新区管委会</span>
    </div>
  </div>
</template>
<script>
import userLogin from "./userlogin";
export default {
  name: "login",
  components: {
    userLogin,
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  computed: {
  },
  props: [],
  methods: {
  },
};
</script>

<style lang="scss">
@import "../../styles/login.scss";
.mask {
  height: 100%;
  width: 100%;
  z-index: 99;
  background: #fff;
  position: absolute;
}
.login-page {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;
  .login-bg {
    position: absolute;
    background-size: 100% 100%;
    height: 69%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .website-inline {
    display: inline-flex;
    align-items: center;
  }
}
.website-header {
  height: 15%;
  min-height: 92px;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 50px 260px 30px 9%;
  position: relative;
}
.logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: 30px;
}

.title {
  font-weight: bold;
  color: #004795;
  margin-top: -3px;

  .name {
    // height: 31px;
    font-size: 32px;
  }
}
.login-body {
  position: absolute;
  width: 389px;
  background-color: #fff;
  padding: 30px;
  border-radius: 11px;
  margin: 0;
  left: auto;
  right: 14%;
  top: 32%;
  .login-logo {
    height: 87px;
    line-height: 44px;
  }
}
.login-form {
  width: 300px;
}
.login-title {
  font-size: 25px;
  font-weight: 600;
  line-height: 60px;
}
.login-footer {
  bottom: 47px;
  color: #000;
  display: flex;
  flex-direction: column;
}
</style>
